<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <!--css -->
    <link rel="stylesheet" href="/adminstatic/base/base.css"/>
    <script src="/adminstatic/base/baseCss.js"></script>
    <style>
        a {
            color: #333;
        }

        a:hover {
            color: rgba(51, 51, 51, 0.3);
        }

        a:focus {
            color: rgba(51, 51, 51, 0.3);
        }

        /*登陆表单样式 start*/
        .wrap {
            width: 100%;
            height: 100%;
            background: url("/adminstatic/image/back.jpg") no-repeat;
            background-size: cover;
        }

        .loginForm {
            background-color: #e7e7e7;
            padding: 40px;
            width: 500px;
            height: 370px;
            opacity: 0.75;
            border-radius: 0.5em;
            margin: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .layui-form-label {
            width: unset;
        }

        i {
            position: absolute;
        }

        .logoHead {
            height: 60px;
            text-align: center;
        }

        .submitDiv {
            width: 80%;
            padding-left: 10px;
            padding-top: 28px;
            margin: auto;
        }

        .submit {
            width: 100%;
            height: 40px;
            line-height: 40px;
            border-radius: 0.5em;
        }

        img {
            position: absolute;
        }

        .imgStyle {
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
<div class="wrap">
    <img src="/adminstatic/image/back.jpg" class="imgStyle">
        <div class="loginForm">
            <div class="logoHead">
                <h2 style="margin-top: 15px;text-align: center;">后台管理系统</h2>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">用户名：</label>
                <div class="layui-input-block">
                    <input style="border-radius: 0.5em;" type="text" id="username" name="username" required
                           lay-verify="required"
                           placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码：</label>
                <div class="layui-input-block">
                    <input style="border-radius: 0.5em;" id="password" type="password" name="password" required
                           lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
<!--<#&#45;&#45;            <div class="layui-form-item">&ndash;&gt;-->
<!--<#&#45;&#45;                <label class="layui-form-label">验证码：</label>&ndash;&gt;-->
<!--<#&#45;&#45;                <div class="layui-input-block" style="display: flex;">&ndash;&gt;-->
<!--<#&#45;&#45;                    <input style="border-radius: 0.5em;flex: 1;" type="text" id="card" name="card" required&ndash;&gt;-->
<!--<#&#45;&#45;                           lay-verify="required"&ndash;&gt;-->
<!--<#&#45;&#45;                           placeholder="输入验证码" autocomplete="off" class="layui-input">&ndash;&gt;-->
<!--<#&#45;&#45;                    <div class="cardDiv">&ndash;&gt;-->
<!--<#&#45;&#45;                        <input style="padding: 0;" id="loginCode" class="layui-input codeInput"&ndash;&gt;-->
<!--<#&#45;&#45;                               type="button">&ndash;&gt;-->
<!--<#&#45;&#45;                    </div>&ndash;&gt;-->
<!--<#&#45;&#45;                </div>&ndash;&gt;-->
<!--<#&#45;&#45;            </div>&ndash;&gt;-->

<!--<#&#45;&#45;            <div class="submitLabel">&ndash;&gt;-->
<!--<#&#45;&#45;                <label>没有账号？<a href="#" id="loginRegister">点击注册</a></label>&ndash;&gt;-->
<!--<#&#45;&#45;            </div>&ndash;&gt;-->
            <div class="submitDiv">
                <input id="loginBtn" type="submit" class="submit layui-btn layui-btn-primary" value="登录"/>
            </div>
        </div>
</div>

<script src="/adminstatic/base/base.js"></script>
<script type="application/javascript">

    $("#loginBtn").click(function () {

        var username = $("input[name='username']").val();
        var password = $("input[name='password']").val();
        if (!vaildeParam(username)) {
            layer.msg("请输入用户名", {icon: 5,offset: 't',anim: 6});
            return;
        }


        if (!vaildeParam(password)) {
            layer.msg("请输入密码", {icon: 5,offset: 't',anim: 6});
            return;
        }
        console.log(username,password);
        var api = '/admin/login';
        var data = {
            "username": username,
            "password": password,
        }

        postJSON(api, data, function (res) {
            console.log(res)
            if(res.type === 'success'){
                layer.msg(res.content, {icon: 1});
                setTimeout(function () {
                    window.location.href = '/admin/maim';
                }, 1000)

            }else{
                layer.msg(res.content, {icon: 5,offset: 't',anim: 6});
            }
        });


    });

    $('#password').keydown(function (e) {
        if (e.keyCode === 13) {
            console.log(1111)
            var username = $("input[name='username']").val();
            var password = $("input[name='password']").val();
            if (!vaildeParam(username)) {
                layer.msg("请输入用户名", {icon: 5,offset: 't',anim: 6});
                return;
            }


            if (!vaildeParam(password)) {
                layer.msg("请输入密码", {icon: 5,offset: 't',anim: 6});
                return;
            }
            console.log(username,password);
            var api = '/admin/login';
            var data = {
                "username": username,
                "password": password,
            }

            postJSON(api, data, function (res) {
                console.log(res)
                if(res.type === 'success'){
                    layer.msg(res.content, {icon: 1});
                    setTimeout(function () {
                        window.location.href = '/admin/maim';
                    }, 1000)

                }else{
                    layer.msg(res.content, {icon: 5,offset: 't',anim: 6});
                }
            });

        }
    })

    $('#username').keydown(function (e) {
        if (e.keyCode === 13) {
            console.log(1111)
            var username = $("input[name='username']").val();
            var password = $("input[name='password']").val();
            if (!vaildeParam(username)) {
                layer.msg("请输入用户名", {icon: 5,offset: 't',anim: 6});
                return;
            }


            if (!vaildeParam(password)) {
                layer.msg("请输入密码", {icon: 5,offset: 't',anim: 6});
                return;
            }
            console.log(username,password);
            var api = '/admin/login';
            var data = {
                "username": username,
                "password": password,
            }

            postJSON(api, data, function (res) {
                console.log(res)
                if(res.type === 'success'){
                    layer.msg(res.content, {icon: 1});
                    setTimeout(function () {
                        window.location.href = '/admin/maim';
                    }, 1000)

                }else{
                    layer.msg(res.content, {icon: 5,offset: 't',anim: 6});
                }
            });

        }
    })

</script>
</body>
</html>